<template>
  <view class="drone-job-page">
   
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-container">
        <uni-icons type="search" size="18" class="search-icon"></uni-icons>
        <input 
          type="text" 
          class="search-input" 
          placeholder="搜索无人机飞手职位、公司或地点"
          v-model="searchKeyword"
          @input="handleSearch"
        >
        </input>
        <u-icon
          name="search" 
          size="18" 
          class="clear-icon" 
          v-if="searchKeyword"
          @click="clearSearch"
        ></u-icon>
      </view>
    </view>

    <!-- 专业筛选栏 -->
    <view class="drone-filter-bar">
      <scroll-view scroll-x class="filter-scroll">
        <view class="filter-items">
          <view class="filter-item" :class="{ active: selectedCategory === 'all' }" @click="selectedCategory = 'all'">
            <text>全部类型</text>
          </view>
          <view class="filter-item" :class="{ active: selectedCategory === 'aerial' }" @click="selectedCategory = 'aerial'">
            <text>航拍测绘</text>
          </view>
          <view class="filter-item" :class="{ active: selectedCategory === 'agriculture' }" @click="selectedCategory = 'agriculture'">
            <text>农业植保</text>
          </view>
          <view class="filter-item" :class="{ active: selectedCategory === 'power' }" @click="selectedCategory = 'power'">
            <text>电力巡检</text>
          </view>
          <view class="filter-item" :class="{ active: selectedCategory === 'film' }" @click="selectedCategory = 'film'">
            <text>影视拍摄</text>
          </view>
          <view class="filter-item" :class="{ active: selectedCategory === 'security' }" @click="selectedCategory = 'security'">
            <text>安防监控</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 排序栏 -->
    <view class="sort-bar">
      <view class="sort-item" :class="{ active: sortType === 'default' }" @click="sortType = 'default'">
        <text>默认</text>
      </view>
      <view class="sort-item" :class="{ active: sortType === 'salary' }" @click="sortType = sortType === 'salary' ? 'salary-desc' : 'salary'">
        <text>薪资</text>
        <u-icon 
          name="arrow-up" 
          size="14" 
          class="sort-icon" 
          v-if="sortType === 'salary'"
        ></u-icon>
        <u-icon 
          name="arrow-down" 
          size="14" 
          class="sort-icon" 
          v-if="sortType === 'salary-desc'"
        ></u-icon>
      </view>
      <view class="sort-item" :class="{ active: sortType === 'latest' }" @click="sortType = 'latest'">
        <text>最新发布</text>
      </view>
      <view class="sort-item" :class="{ active: sortType === 'experience' }" @click="sortType = sortType === 'experience' ? 'experience-desc' : 'experience'">
        <text>经验要求</text>
      </view>
    </view>

    <!-- 职位列表 -->
    <view class="job-list">
      <view 
        class="job-card" 
        v-for="(job, index) in filteredJobs" 
        :key="index"
        @click="gotoJobDetail(job)"
        :animation="job.animation"
        @load="initJobAnimation(index)"
      >
        <!-- 紧急/热门标签 -->
        <view class="job-tag" v-if="job.isUrgent">紧急招聘</view>
        <view class="job-tag hot" v-if="job.isHot && !job.isUrgent">热门职位</view>
        
        <view class="job-header">
          <image :src="job.companyLogo" alt="公司logo" class="company-logo"></image>
          <view class="job-info">
            <view class="job-title">{{ job.title }}</view>
            <view class="company-name">{{ job.companyName }}</view>
            <view class="job-meta">
              <view class="meta-item">{{ job.location }}</view>
              <view class="meta-item">{{ job.experience }}</view>
              <view class="meta-item">{{ job.education }}</view>
            </view>
          </view>
        </view>
        
        <view class="job-details">
          <view class="salary-box">
            <text class="salary">{{ job.salary }}</text>
            <text class="salary-period">{{ job.salaryPeriod }}</text>
          </view>
          
          <view class="drone-requirements">
            <view class="requirement-item" v-for="(req, i) in job.droneTypes" :key="i">
              <uni-icons type="airplane" size="14" class="drone-icon"></uni-icons>
              <text class="requirement-text">{{ req }}</text>
            </view>
          </view>
          
          <view class="job-skills">
            <view class="skill-tag" v-for="(skill, i) in job.skills" :key="i">
              {{ skill }}
            </view>
          </view>
        </view>
        
        <view class="job-footer">
          <view class="publish-info">
            <text class="publish-time">{{ job.publishTime }}</text>
            <text class="view-count">{{ job.viewCount }}人浏览</text>
          </view>
          <view class="collect-btn" @click.stop="toggleCollect(job, index)">
            <uni-icons 
              type="heart" 
              size="20" 
              :color="job.collected ? '#FF4D4F' : '#C9CDD4'"
              :filled="job.collected"
            ></uni-icons>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="load-more" v-if="hasMore">
        <uni-load-more 
          :status="loadingStatus" 
          :content-text="loadMoreText"
        ></uni-load-more>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-if="filteredJobs.length === 0 && !isLoading">
        <view class="empty-icon">
          <u-icon type="airplane" size="60" color="#C9CDD4"></u-icon>
        </view>
        <text class="empty-text">未找到相关职位</text>
        <text class="empty-desc">尝试调整搜索条件或关键词</text>
        <button class="reset-btn" @click="resetAllFilters">重置筛选</button>
      </view>
    </view>

    <!-- 高级筛选抽屉 -->
    <view class="filter-drawer" v-if="showFilter">
      <view class="drawer-mask" @click="toggleFilter"></view>
      <view class="drawer-content">
        <view class="drawer-header">
          <text class="drawer-title">高级筛选</text>
          <view class="drawer-actions">
            <text class="reset-btn" @click="resetFilters">重置</text>
            <text class="confirm-btn" @click="confirmFilters">确定</text>
          </view>
        </view>
        
        <scroll-view class="filter-scroll-content" scroll-y>
          <!-- 工作经验 -->
          <view class="filter-section">
            <text class="section-title">工作经验</text>
            <view class="filter-options">
              <view 
                class="option-item" 
                :class="{ active: filterExperience === item.value }"
                v-for="(item, i) in experienceOptions" 
                :key="i"
                @click="filterExperience = item.value"
              >
                {{ item.label }}
              </view>
            </view>
          </view>
          
          <!-- 执照要求 -->
          <view class="filter-section">
            <text class="section-title">执照要求</text>
            <view class="filter-options">
              <view 
                class="option-item" 
                :class="{ active: filterLicense === item.value }"
                v-for="(item, i) in licenseOptions" 
                :key="i"
                @click="filterLicense = item.value"
              >
                {{ item.label }}
              </view>
            </view>
          </view>
          
          <!-- 设备要求 -->
          <view class="filter-section">
            <text class="section-title">设备要求</text>
            <view class="filter-options">
              <view 
                class="option-item checkbox" 
                :class="{ active: filterEquipment.includes(item.value) }"
                v-for="(item, i) in equipmentOptions" 
                :key="i"
                @click="toggleEquipment(item.value)"
              >
                <view class="checkbox-icon" :class="{ checked: filterEquipment.includes(item.value) }">
                  <uni-icons type="checkmark" size="16" v-if="filterEquipment.includes(item.value)"></uni-icons>
                </view>
                <text>{{ item.label }}</text>
              </view>
            </view>
          </view>
          
          <!-- 工作模式 -->
          <view class="filter-section">
            <text class="section-title">工作模式</text>
            <view class="filter-options">
              <view 
                class="option-item" 
                :class="{ active: filterMode === item.value }"
                v-for="(item, i) in modeOptions" 
                :key="i"
                @click="filterMode = item.value"
              >
                {{ item.label }}
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 职位数据
      jobs: [],
      filteredJobs: [],
      isLoading: false,
      hasMore: true,
      loadingStatus: 'more',
      loadMoreText: {
        contentdown: '下拉加载更多',
        contentrefresh: '加载中...',
        contentnomore: '没有更多职位了'
      },
      
      // 筛选条件
      searchKeyword: '',
      selectedCategory: 'all',
      sortType: 'default',
      
      // 高级筛选条件
      showFilter: false,
      filterExperience: 'all',
      filterLicense: 'all',
      filterEquipment: [],
      filterMode: 'all',
      
      // 筛选选项配置
      experienceOptions: [
        { label: '不限', value: 'all' },
        { label: '应届生', value: 'fresh' },
        { label: '1年以内', value: 'within1' },
        { label: '1-3年', value: '1-3' },
        { label: '3-5年', value: '3-5' },
        { label: '5年以上', value: 'above5' }
      ],
      
      licenseOptions: [
        { label: '不限', value: 'all' },
        { label: 'AOPA证书', value: 'aopa' },
        { label: 'CAAC执照', value: 'caac' },
        { label: 'ASFC证书', value: 'asfc' },
        { label: '不需要', value: 'none' }
      ],
      
      equipmentOptions: [
        { label: '大疆精灵系列', value: 'phantom' },
        { label: '大疆悟系列', value: 'inspire' },
        { label: '大疆Mavic系列', value: 'mavic' },
        { label: '大疆农业机', value: 'agricultural' },
        { label: '固定翼无人机', value: 'fixed-wing' }
      ],
      
      modeOptions: [
        { label: '不限', value: 'all' },
        { label: '全职', value: 'fulltime' },
        { label: '兼职', value: 'parttime' },
        { label: '项目制', value: 'project' },
        { label: '远程', value: 'remote' }
      ]
    };
  },
  
  onLoad() {
    // 初始化职位数据
    this.loadJobs();
  },
  
  onReachBottom() {
    // 触底加载更多
    if (this.hasMore && !this.isLoading) {
      this.loadMoreJobs();
    }
  },
  
  computed: {
    // 根据筛选条件过滤职位
    filteredJobs() {
      let result = [...this.jobs];
      
      // 职位类型筛选
      if (this.selectedCategory !== 'all') {
        result = result.filter(job => job.category === this.selectedCategory);
      }
      
      // 搜索筛选
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        result = result.filter(job => 
          job.title.toLowerCase().includes(keyword) || 
          job.companyName.toLowerCase().includes(keyword) ||
          job.location.toLowerCase().includes(keyword) ||
          job.skills.some(skill => skill.toLowerCase().includes(keyword)) ||
          job.droneTypes.some(type => type.toLowerCase().includes(keyword))
        );
      }
      
      // 经验筛选
      if (this.filterExperience !== 'all') {
        result = result.filter(job => {
          if (this.filterExperience === 'fresh') {
            return job.experience.includes('应届');
          } else if (this.filterExperience === 'within1') {
            return job.experience.includes('1年以内');
          } else if (this.filterExperience === '1-3') {
            return job.experience.includes('1-3年');
          } else if (this.filterExperience === '3-5') {
            return job.experience.includes('3-5年');
          } else if (this.filterExperience === 'above5') {
            return job.experience.includes('5年以上');
          }
          return true;
        });
      }
      
      // 执照筛选
      if (this.filterLicense !== 'all' && this.filterLicense !== 'none') {
        result = result.filter(job => 
          job.licenseRequirements.some(req => req.toLowerCase().includes(this.filterLicense))
        );
      } else if (this.filterLicense === 'none') {
        result = result.filter(job => job.licenseRequirements.length === 0);
      }
      
      // 设备筛选
      if (this.filterEquipment.length > 0) {
        result = result.filter(job => 
          this.filterEquipment.every(equip => 
            job.droneTypes.some(type => type.toLowerCase().includes(equip))
          )
        );
      }
      
      // 工作模式筛选
      if (this.filterMode !== 'all') {
        result = result.filter(job => job.mode === this.filterMode);
      }
      
      // 排序处理
      if (this.sortType === 'salary') {
        result.sort((a, b) => {
          const salA = parseInt(a.salary.split('-')[0]);
          const salB = parseInt(b.salary.split('-')[0]);
          return salA - salB;
        });
      } else if (this.sortType === 'salary-desc') {
        result.sort((a, b) => {
          const salA = parseInt(a.salary.split('-')[0]);
          const salB = parseInt(b.salary.split('-')[0]);
          return salB - salA;
        });
      } else if (this.sortType === 'latest') {
        result.sort((a, b) => {
          return new Date(b.publishTime) - new Date(a.publishTime);
        });
      } else if (this.sortType === 'experience') {
        // 按经验要求从低到高
        const expOrder = {
          '应届生': 0,
          '1年以内': 1,
          '1-3年': 2,
          '3-5年': 3,
          '5年以上': 4
        };
        result.sort((a, b) => {
          return expOrder[a.experience] - expOrder[b.experience];
        });
      } else if (this.sortType === 'experience-desc') {
        // 按经验要求从高到低
        const expOrder = {
          '应届生': 0,
          '1年以内': 1,
          '1-3年': 2,
          '3-5年': 3,
          '5年以上': 4
        };
        result.sort((a, b) => {
          return expOrder[b.experience] - expOrder[a.experience];
        });
      }
      
      return result;
    }
  },
  
  methods: {
    // 加载职位数据
    loadJobs() {
      this.isLoading = true;
      
      // 模拟API请求
      setTimeout(() => {
        const newJobs = [
          {
            id: 1,
            title: '资深航拍飞手',
            companyName: '天际航拍传媒',
            companyLogo: 'https://picsum.photos/id/111/100/100',
            location: '北京·朝阳区',
            experience: '3-5年',
            education: '大专及以上',
            salary: '15-25',
            salaryPeriod: 'k/月',
            category: 'aerial',
            mode: 'fulltime',
            droneTypes: ['大疆悟2', '精灵4 Pro', 'Mavic 3'],
            skills: ['航拍技巧', '后期剪辑', '航线规划'],
            licenseRequirements: ['CAAC执照', 'AOPA证书'],
            publishTime: '2023-10-25',
            viewCount: 328,
            isHot: true,
            isUrgent: false,
            collected: false
          },
          {
            id: 2,
            title: '农业植保飞手',
            companyName: '绿航农业科技',
            companyLogo: 'https://picsum.photos/id/112/100/100',
            location: '郑州·金水区',
            experience: '1-3年',
            education: '高中及以上',
            salary: '8-15',
            salaryPeriod: 'k/月',
            category: 'agriculture',
            mode: 'fulltime',
            droneTypes: ['大疆T30', '大疆T20', '极飞P80'],
            skills: ['植保作业', '无人机维护', '农药配比'],
            licenseRequirements: ['AOPA证书'],
            publishTime: '2023-10-24',
            viewCount: 256,
            isHot: false,
            isUrgent: true,
            collected: false
          },
          {
            id: 3,
            title: '电力巡检飞手',
            companyName: '电力运维有限公司',
            companyLogo: 'https://picsum.photos/id/113/100/100',
            location: '上海·浦东新区',
            experience: '3-5年',
            education: '大专及以上',
            salary: '18-28',
            salaryPeriod: 'k/月',
            category: 'power',
            mode: 'fulltime',
            droneTypes: ['大疆M300 RTK', '固定翼测绘机'],
            skills: ['电力巡检', '数据处理', '故障分析'],
            licenseRequirements: ['CAAC执照'],
            publishTime: '2023-10-23',
            viewCount: 189,
            isHot: false,
            isUrgent: false,
            collected: true
          },
          {
            id: 4,
            title: '影视航拍飞手',
            companyName: '光影影视制作',
            companyLogo: 'https://picsum.photos/id/114/100/100',
            location: '杭州·西湖区',
            experience: '2-4年',
            education: '不限',
            salary: '2000-3000',
            salaryPeriod: '/天',
            category: 'film',
            mode: 'parttime',
            droneTypes: ['悟2', '精灵4 RTK', 'Mavic 2 Pro'],
            skills: ['电影级航拍', '跟拍技巧', '多机协同'],
            licenseRequirements: ['AOPA证书'],
            publishTime: '2023-10-22',
            viewCount: 412,
            isHot: true,
            isUrgent: false,
            collected: false
          },
          {
            id: 5,
            title: '安防监控飞手',
            companyName: '智慧城市安防',
            companyLogo: 'https://picsum.photos/id/115/100/100',
            location: '广州·天河区',
            experience: '1-3年',
            education: '中专及以上',
            salary: '10-18',
            salaryPeriod: 'k/月',
            category: 'security',
            mode: 'fulltime',
            droneTypes: ['Mavic 2 Enterprise', 'Matrice 210'],
            skills: ['夜间飞行', '实时传输', '应急处理'],
            licenseRequirements: ['CAAC执照'],
            publishTime: '2023-10-21',
            viewCount: 156,
            isHot: false,
            isUrgent: false,
            collected: false
          },
          {
            id: 6,
            title: '测绘工程师（无人机）',
            companyName: '蓝图测绘院',
            companyLogo: 'https://picsum.photos/id/116/100/100',
            location: '武汉·洪山区',
            experience: '5年以上',
            education: '本科及以上',
            salary: '25-40',
            salaryPeriod: 'k/月',
            category: 'aerial',
            mode: 'fulltime',
            droneTypes: ['固定翼测绘机', '精灵4 RTK', 'M300 RTK'],
            skills: ['三维建模', '数据处理', 'CAD绘图'],
            licenseRequirements: ['CAAC执照', '测绘师证书'],
            publishTime: '2023-10-20',
            viewCount: 203,
            isHot: false,
            isUrgent: true,
            collected: false
          }
        ];
        
        this.jobs = [...this.jobs, ...newJobs];
        this.isLoading = false;
      }, 1000);
    },
    
    // 加载更多职位
    loadMoreJobs() {
      if (this.jobs.length >= 18) { // 模拟数据上限
        this.hasMore = false;
        this.loadingStatus = 'nomore';
        return;
      }
      
      this.loadingStatus = 'loading';
      this.isLoading = true;
      
      // 模拟加载更多
      setTimeout(() => {
        this.loadJobs();
        this.loadingStatus = 'more';
      }, 1500);
    },
    
    // 初始化职位卡片动画
    initJobAnimation(index) {
      if (this.jobs[index] && !this.jobs[index].animation) {
        const animation = uni.createAnimation({
          duration: 300,
          timingFunction: 'ease-out'
        });
        
        animation
          .translateY(30)
          .opacity(0)
          .step()
          .translateY(0)
          .opacity(1)
          .step();
          
        this.$set(this.jobs[index], 'animation', animation.export());
      }
    },
    
    // 处理搜索
    handleSearch() {
      // 搜索防抖处理
      clearTimeout(this.searchTimer);
      this.searchTimer = setTimeout(() => {
        // 搜索逻辑在computed中处理
      }, 300);
    },
    
    // 清除搜索
    clearSearch() {
      this.searchKeyword = '';
    },
    
    // 切换筛选抽屉
    toggleFilter() {
      this.showFilter = !this.showFilter;
    },
    
    // 确认筛选条件
    confirmFilters() {
      this.showFilter = false;
      // 重置列表位置到顶部
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 300
      });
    },
    
    // 重置筛选条件
    resetFilters() {
      this.filterExperience = 'all';
      this.filterLicense = 'all';
      this.filterEquipment = [];
      this.filterMode = 'all';
    },
    
    // 重置所有筛选条件
    resetAllFilters() {
      this.searchKeyword = '';
      this.selectedCategory = 'all';
      this.sortType = 'default';
      this.resetFilters();
    },
    
    // 切换设备筛选
    toggleEquipment(value) {
      const index = this.filterEquipment.indexOf(value);
      if (index > -1) {
        this.filterEquipment.splice(index, 1);
      } else {
        this.filterEquipment.push(value);
      }
    },
    
    // 切换收藏状态
    toggleCollect(job, index) {
      this.$set(this.jobs[index], 'collected', !job.collected);
      
      // 添加收藏动画
      const collectBtn = this.$el.querySelectorAll('.collect-btn')[index];
      if (collectBtn) {
        collectBtn.classList.add('collect-animate');
        setTimeout(() => {
          collectBtn.classList.remove('collect-animate');
        }, 500);
      }
      
      uni.showToast({
        title: job.collected ? '已取消收藏' : '已收藏职位',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 前往职位详情
    gotoJobDetail(job) {
      uni.navigateTo({
        url: `/pages/jobs/drone-job-detail?id=${job.id}`
      });
    },
    
    // 返回上一页
    navBack() {
      uni.navigateBack();
    }
  }
};
</script>

<style scoped lang="scss">
// 颜色变量
$primary: #165DFF;
$primary-light: #E8F3FF;
$danger: #FF4D4F;
$warning: #FF7D00;
$success: #00B42A;
$text-primary: #1D2129;
$text-secondary: #4E5969;
$text-tertiary: #86909C;
$bg-light: #F5F7FA;
$bg-white: #FFFFFF;
$border-light: #E5E6EB;
$shadow-light: 0 2px 10px rgba(0, 0, 0, 0.05);

.drone-job-page {
  background-color: $bg-light;
  min-height: 100vh;
  padding-top: var(--status-bar-height);
}

// 导航栏
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .back-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    &:active {
      background-color: $bg-light;
    }
  }
  
  .nav-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
  }
  
  .filter-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    
    &:active {
      background-color: $bg-light;
    }
  }
}

// 搜索栏
.search-bar {
  padding: 12px 16px;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .search-container {
    display: flex;
    align-items: center;
    background-color: $bg-light;
    border-radius: 8px;
    padding: 0 16px;
    height: 44px;
    
    .search-icon {
      color: $text-tertiary;
      margin-right: 8px;
    }
    
    .search-input {
      flex: 1;
      height: 100%;
      font-size: 14px;
      color: $text-primary;
      background: transparent;
      border: none;
      outline: none;
    }
    
    .clear-icon {
      color: $text-tertiary;
      margin-left: 8px;
    }
  }
}

// 专业筛选栏
.drone-filter-bar {
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .filter-scroll {
    width: 100%;
    white-space: nowrap;
  }
  
  .filter-items {
    display: inline-flex;
    padding: 12px 16px;
    
    .filter-item {
      padding: 6px 16px;
      margin-right: 8px;
      font-size: 14px;
      color: $text-secondary;
      border-radius: 16px;
      transition: all 0.2s;
      
      &.active {
        background-color: $primary;
        color: white;
        font-weight: 500;
      }
      
      &:active {
        background-color: $bg-light;
      }
    }
  }
}

// 排序栏
.sort-bar {
  display: flex;
  background-color: $bg-white;
  border-bottom: 1px solid $border-light;
  
  .sort-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    font-size: 14px;
    color: $text-secondary;
    position: relative;
    
    .sort-icon {
      margin-left: 4px;
      color: $primary;
    }
    
    &.active {
      color: $primary;
      font-weight: 500;
    }
    
    &:active {
      background-color: $bg-light;
    }
    
    &:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0;
      top: 12px;
      height: 20px;
      width: 1px;
      background-color: $border-light;
    }
  }
}

// 职位列表
.job-list {
  padding: 12px 16px;
  
  .job-card {
    position: relative;
    background-color: $bg-white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: $shadow-light;
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.99);
      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05);
    }
  }
  
  .job-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: $danger;
    color: white;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 4px;
    
    &.hot {
      background-color: $warning;
    }
  }
  
  .job-header {
    display: flex;
    margin-bottom: 16px;
    
    .company-logo {
      width: 60px;
      height: 60px;
      border-radius: 8px;
      object-fit: cover;
      margin-right: 12px;
    }
    
    .job-info {
      flex: 1;
      
      .job-title {
        font-size: 16px;
        font-weight: 600;
        color: $text-primary;
        margin-bottom: 4px;
        line-height: 1.3;
      }
      
      .company-name {
        font-size: 14px;
        color: $text-secondary;
        margin-bottom: 6px;
      }
      
      .job-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        
        .meta-item {
          font-size: 12px;
          color: $text-tertiary;
          padding-right: 8px;
          position: relative;
          
          &:not(:last-child)::after {
            content: '•';
            position: absolute;
            right: -2px;
            top: 0;
            font-size: 10px;
          }
        }
      }
    }
  }
  
  .job-details {
    margin-bottom: 16px;
    
    .salary-box {
      margin-bottom: 12px;
      
      .salary {
        font-size: 18px;
        font-weight: 600;
        color: $danger;
      }
      
      .salary-period {
        font-size: 14px;
        color: $danger;
        margin-left: 4px;
      }
    }
    
    .drone-requirements {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
      
      .requirement-item {
        display: flex;
        align-items: center;
        background-color: $bg-light;
        color: $text-secondary;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 4px;
        
        .drone-icon {
          margin-right: 4px;
          color: $primary;
        }
      }
    }
    
    .job-skills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      
      .skill-tag {
        background-color: rgba(22, 93, 255, 0.1);
        color: $primary;
        font-size: 12px;
        padding: 4px 10px;
        border-radius: 4px;
      }
    }
  }
  
  .job-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px dashed $border-light;
    
    .publish-info {
      display: flex;
      align-items: center;
      gap: 12px;
      
      .publish-time, .view-count {
        font-size: 12px;
        color: $text-tertiary;
      }
    }
    
    .collect-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      
      &:active {
        background-color: $bg-light;
      }
    }
  }
  
  .load-more {
    padding: 20px 0;
    text-align: center;
  }
}

// 空状态
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  
  .empty-icon {
    margin-bottom: 24px;
  }
  
  .empty-text {
    font-size: 16px;
    font-weight: 500;
    color: $text-secondary;
    margin-bottom: 8px;
  }
  
  .empty-desc {
    font-size: 14px;
    color: $text-tertiary;
    margin-bottom: 32px;
  }
  
  .reset-btn {
    padding: 8px 24px;
    background-color: $primary;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    transition: all 0.2s;
    
    &:active {
      background-color: #0E42D2;
    }
  }
}

// 筛选抽屉
.filter-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  
  .drawer-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    animation: fadeIn 0.3s;
  }
  
  .drawer-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: $bg-white;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    animation: slideUp 0.3s;
  }
  
  .drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid $border-light;
    
    .drawer-title {
      font-size: 18px;
      font-weight: 600;
      color: $text-primary;
    }
    
    .drawer-actions {
      display: flex;
      gap: 16px;
    }
    
    .reset-btn {
      font-size: 16px;
      color: $text-secondary;
    }
    
    .confirm-btn {
      font-size: 16px;
      color: $primary;
      font-weight: 500;
    }
  }
  
  .filter-scroll-content {
    height: calc(80vh - 58px);
  }
  
  .filter-section {
    padding: 16px;
    border-bottom: 1px solid $border-light;
    
    .section-title {
      font-size: 16px;
      font-weight: 500;
      color: $text-primary;
      margin-bottom: 16px;
      display: block;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }
    
    .option-item {
      padding: 8px 16px;
      background-color: $bg-light;
      color: $text-secondary;
      font-size: 14px;
      border-radius: 6px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      
      &.active {
        background-color: $primary;
        color: white;
      }
      
      &.checkbox {
        padding-left: 12px;
        
        .checkbox-icon {
          width: 18px;
          height: 18px;
          border-radius: 4px;
          border: 1px solid $border-light;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 8px;
          background-color: white;
          
          &.checked {
            background-color: $primary;
            border-color: $primary;
            color: white;
          }
        }
      }
    }
  }
}

// 动画效果
.collect-animate {
  animation: collectPulse 0.5s;
}

@keyframes collectPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
</style>
    